<?php
  session_start(); 
?>
<html>
<head>
<script language="javascript" type="text/javascript">
var peticion = false;
  try {
peticion = new XMLHttpRequest();
  } catch (trymicrosoft) {
  try {
peticion = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
  try {
  peticion = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
  peticion = false;
  } 
}
}

function cargarmensaje() { 
  var element = document.getElementById('Chat'); 
  peticion.open("GET", 'actualizar.php?id=<? echo rand(1,10000);?>'); 
  peticion.onreadystatechange = function() { 
	if (peticion.readyState == 4) { 
	element.innerHTML = element.innerHTML + peticion.responseText; 
	} 
} 
peticion.send(null); 
} 
function GrabarMensaje() {
  var element = document.getElementById('MensajeGrabar'); 
  element.innerHTML = '<p><img src="Imagenes/ajax_loading.gif" /> Grabando datos</p>';    
  var poststr = "grabar.php?nombre=" + encodeURI( document.getElementById("nombre").value)
  var poststr = poststr +"&mensaje=" + encodeURI( document.getElementById("mensaje").value
  ); 
  peticion.open("GET", poststr); 
  peticion.onreadystatechange = function() { 
	if (peticion.readyState == 4) { 
	element.innerHTML = "&nbsp;"
	document.getElementById("mensaje").value ='' 
	cargarmensaje() ; 
} 
} 
peticion.send(null); 
} 
</script>
<style type="text/css">

#Chat {
  width:400px;
  height:350px;
  overflow:auto;
  border: 1px #CCCCCC solid;
}

#Cajamensaje {
  padding:4px;
  color:#999;
  font:10px Verdana, Arial, Helvetica, sans-serif;
  border-bottom: 1px #F2F2F2 solid;
}

form {
  color:#333;
  font:10px Verdana, Arial, Helvetica, sans-serif;
}

.boton {
  font:10px Verdana, Arial, Helvetica, sans-serif;
  background:#006699;
  color:#FFFFFF;
  padding:2px;
  text-align:center;
  border:none;
}

.nombre {
  color:#FF9900;
  font-weight:bold;
}

.texto {
  color:#CC0000;
  font:10px Verdana, Arial, Helvetica, sans-serif;
  border:#CCCCCC 1px solid;
  padding:3px;
}

label {
  width:65px;
  float:left;
  display:block;
  padding:3px;
}

#MensajeGrabar {
  color:#CC0000;
  font:10px Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body onLoad="Javascript:setInterval('cargarmensaje()', 14000);">
<div id="Chat">
<?php
include("conecta.php");
$query= "SELECT * from chat ORDER BY id DESC LIMIT 4";
$result=mysql_query($query);
$num=mysql_numrows($result);

$i=0;
while ($i < $num) {
  $nombre=mysql_result($result,$i,"nombre");
  $mensaje= mysql_result($result,$i,"mensaje");
  echo "<div id='Cajamensaje'>";
  echo "<span class='nombre'>$nombre &raquo; </span>";
  echo "$mensaje </div>";
  $i++;
}
$_SESSION['final'] = mysql_result($result,0, "id");
mysql_close();
?>
</div>
<form action="#" name="form1" id="form1">
<p>
<label for="Nombre">Nombre:</label>
<input type="text" name="nombre" class="texto" id="nombre">
</p><p>
<label for="Mensaje">Mensaje:</label>
<input name="mensaje" type="text" class="texto" id="mensaje" size="50">
</p>
<p>
<input type="button" name="button" value="Enviar"  class="boton"  onclick="javascript:GrabarMensaje();">
</p>
</form>

<div id="MensajeGrabar">&nbsp;</div>
</body>

